{% extends 'base/base1.html' %}
{% load static %}

{% block title %}管理仪表板{% endblock %}

{% block css %}
<style>
    .stats-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        padding: 20px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .stats-number {
        font-size: 2.5rem;
        font-weight: bold;
        color: #007bff;
    }
    
    .stats-label {
        color: #6c757d;
        font-size: 1.1rem;
    }
    
    .chart-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .low-stock {
        color: #dc3545;
        font-weight: bold;
    }
    
    .order-item {
        border-bottom: 1px solid #dee2e6;
        padding: 10px 0;
    }
    
    .order-item:last-child {
        border-bottom: none;
    }
</style>
{% endblock %}

{% block main %}
<div class="container-fluid">
    <h2>管理仪表板</h2>
    
    <!-- 统计卡片 -->
    <div class="row">
        <div class="col-md-3">
            <div class="stats-card">
                <div class="stats-number">{{ total_products }}</div>
                <div class="stats-label">商品总数</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card">
                <div class="stats-number">{{ total_users }}</div>
                <div class="stats-label">用户总数</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card">
                <div class="stats-number">{{ total_orders }}</div>
                <div class="stats-label">订单总数</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card">
                <div class="stats-number">{{ total_categories }}</div>
                <div class="stats-label">分类总数</div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <!-- 订单状态统计 -->
        <div class="col-md-6">
            <div class="chart-card">
                <h4>订单状态统计</h4>
                <table class="table">
                    <thead>
                        <tr>
                            <th>状态</th>
                            <th>数量</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for stat in order_stats %}
                        <tr>
                            <td>{{ stat.status }}</td>
                            <td>{{ stat.count }}</td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="2" class="text-center">暂无数据</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 低库存商品 -->
        <div class="col-md-6">
            <div class="chart-card">
                <h4>低库存商品 (≤10件)</h4>
                <div style="max-height: 300px; overflow-y: auto;">
                    {% for product in low_stock_products %}
                    <div class="d-flex justify-content-between align-items-center py-2 border-bottom">
                        <div>
                            <strong>{{ product.name }}</strong>
                            <br>
                            <small class="text-muted">{{ product.category }}</small>
                        </div>
                        <div class="low-stock">
                            {{ product.stock }} 件
                        </div>
                    </div>
                    {% empty %}
                    <p class="text-center text-muted">暂无低库存商品</p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    
    <!-- 最新订单 -->
    <div class="row">
        <div class="col-md-12">
            <div class="chart-card">
                <h4>最新订单</h4>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>订单号</th>
                                <th>用户</th>
                                <th>金额</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for order in recent_orders %}
                            <tr>
                                <td>{{ order.order_number }}</td>
                                <td>{{ order.user.username }}</td>
                                <td>
                                    <strong>￥{{ order.total_amount }}</strong>
                                    <br><small class="text-muted">{{ order.product.name }}</small>
                                </td>
                                <td>
                                    <span class="badge badge-info">{{ order.get_status_display }}</span>
                                </td>
                                <td>{{ order.created_at|date:"m-d H:i" }}</td>
                                <td>
                                    <a href="{% url 'main:order_detail' order.pk %}" class="btn btn-sm btn-outline-primary">查看</a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="6" class="text-center">暂无订单</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                <div class="text-center">
                    <a href="{% url 'main:order_list' %}" class="btn btn-primary">查看所有订单</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}